* {
  margin: 0;
  box-sizing: border-box;
}

@keyframes footer-car-animate {
  0% {
    transform: scale(0.85);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.cat {
  position: relative;
  width: 100vw;
  max-width: 375px;
  height: 100vh;
  max-height: 820px;
  overflow: hidden;
  margin: 30px auto;

  .goods {
    &-container {
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
      background-color: rgba($color: white, $alpha: 0.7);
      position: relative;
    }

    &-nav,
    &-list {
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;

      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */

      /* Chrome、Safari and Opera */
      &::-webkit-scrollbar {
        display: none;
      }
    }

    &-nav {
      flex: 1;
      background-color: rgba($color: #000, $alpha: 0.1);
      padding-bottom: 100px;
    }

    &-list {
      flex: 4;
      padding: 0 12px 80px 0;
    }

    &-item {
      display: flex;
      align-items: center;
      margin-top: 20px;

      &.active {
        .goods-btns i.i-jianhao,
        .goods-btns span {
          display: block;
        }
      }
    }

    &-pic {
      width: 80px;
      aspect-ratio: 1;
      margin: 0 12px;
      border-radius: 50%;
      object-fit: contain;
      background-color: rgba($color: #b8c4a2, $alpha: 0.5);
    }

    &-info {
      padding: 0 12px;
      font-size: 10px;
      flex: 1;
    }

    &-title {
      font-size: 16px;
    }

    &-desc,
    &-cell {
      color: #999;
    }

    &-desc,
    &-cell,
    &-confirm {
      margin-top: 8px;
    }

    &-title,
    &-cell {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-confirm {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-prise {
      color: #eb5858;
      font-size: 16px;

      &-unit {
        font-size: 8px;
      }
    }

    &-btns {
      display: flex;
      align-items: center;

      i {
        width: 20px;
        aspect-ratio: 1;
        border-radius: 50%;
        text-align: center;
        font-style: inherit;
        font-style: 14px;

        &.i-jiahao {
          color: #fff;
          background-color: rgba($color: #00f, $alpha: 0.7);
        }

        &.i-jianhao {
          border: 1px solid #ccc;
          display: none;
        }
      }

      span {
        margin: 0 8px;
        width: 2em;
        text-align: center;
        display: none;
      }
    }

    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      display: flex;
      align-items: end;
      background-color: #111;
      padding-left: 10px;

      &-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #111;
        flex-shrink: 0;
        box-shadow: 0 0 3px 0 #333;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          .footer {
            &-icon {
              background-color: rgb(138, 137, 242);
            }

            &-badge {
              display: block;
            }
          }
        }

        &.animate {
          .footer-icon {
            animation: footer-cat-animate 350ms ease-in-out;
          }
        }

        .footer {
          &-icon {
            width: 95%;
            height: 95%;
            border-radius: inherit;
          }

          &-badge {
            display: none;
            position: absolute;
            left: 66%;
            bottom: 66%;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            break-before: inherit;
            background-color: red;
            color: #ddd;
            font-size: 8px;
          }
        }
      }

      &-prise {
        flex: 1;
        color: #bbb;
        height: 100%;
        padding: 4px 10px;

        .prise {
          &-number {
            height: 50%;
            font-size: 16px;
          }

          &-tip {
            font-size: 10px;
            margin-top: 4px;
          }
        }
      }

      &-pay {
        min-width: 30%;
        flex-shrink: 0;
        height: 100%;
        background-color: #333;
        color: #999;
        font-size: 14px;

        &.active {
          background-color: #76b572;

          .pay {
            font-size: 18px;
            display: flex;
            color: white;
          }

          span {
            display: none;
          }
        }

        .pay {
          display: none;
        }

        span {
          display: flex;
          font-size: 14px;
        }

        .pay,
        span {
          height: 100%;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.add-to-cat {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  transition: transform 0.5s linear;

  & &-icon {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: white;
    background-color: rgba($color: #00f, $alpha: 0.7);
    transition: transform 0.5s cubic-bezier(0.5, -0.5, 1, 1);
    text-align: center;
  }
}
